<template>
  <div class="home">
    <el-container>
      <el-aside :width="!isOpen?'200px':'64px'">
        <div class="logo" :class='{"mini-logo": isOpen}'></div>
        <!-- default-active=''  代表高亮 -->
        <!-- router 代表使用vue-router -->
        <!-- :unique-opened='true' 可实现手风琴效果 -->
        <el-menu router default-active='$route.path' :unique-opened='true' :collapse='isOpen' :collapse-transition='false' background-color="#333B4E" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item index="/home/welcome">
            <i class="el-icon-setting"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>页面内容</span>
            </template>
            <el-menu-item index="/home/publish">发布文章</el-menu-item>
            <el-menu-item index="/home/article">内容列表</el-menu-item>
            <el-menu-item index="/home/comment">评论列表</el-menu-item>
            <el-menu-item index="/home/images">素材管理</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>粉丝管理</span>
            </template>
            <el-menu-item index="3-1">图文数据</el-menu-item>
            <el-menu-item index="3-2">粉丝概况</el-menu-item>
            <el-menu-item index="3-3">粉丝画像</el-menu-item>
            <el-menu-item index="/home/fans">粉丝列表</el-menu-item>
          </el-submenu>
          <el-menu-item index="/home/setting">
            <i class="el-icon-setting"></i>
            <span slot="title">账户信息</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <!-- 顶部导航栏布局 -->
          <i @click='toggleAside' class="el-icon-s-fold"></i>
          <span class="cname">江苏传智播客教育科技股份有限公司</span>
          <el-dropdown class='my-dropdown'>
            <span class="el-dropdown-link">
              <img class="user-icon" :src='user.photo' alt />
              <span class="user-name">{{user.name}}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>git地址</el-dropdown-item>
              <!-- 该处是一个组件 组件加点击事件没效果  可加native 是将点击事件绑定到根元素上（渲染出来的根元素） -->
              <el-dropdown-item @click.native="logout" divided>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <!-- 路由填充位 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import axios from 'axios'
import { loadInfo } from '@/api/home.js'
export default {
  name: 'Home',
  data () {
    return {
      // 控制左侧菜单展开和折叠
      isOpen: false,
      user: {}
    }
  },
  methods: {
    // 退出登录
    logout () {
      // 先提示信息  删除token 跳转登录页
      this.$confirm('确认要退出吗？').then(() => {
        // 删除token
        localStorage.removeItem('mytoken')
        // 跳转
        this.$router.push('/login')
      })
    },
    // 获取用户信息
    async localinfo () {
      try {
        // 获取缓存中的token
        // const token = localStorage.getItem('mytoken')
        // const ret = await axios.get('http://api-toutiao-web.itheima.net/mp/v1_0/user/profile', {
        //   headers: {
        //     // 请求头  是由后端提供的
        //     Authorization: 'Bearer ' + token
        //   }
        // })
        // console.log(ret)

        // 调用封装好的模块
        const ret = await loadInfo()
        // 获取请求参数中的数据
        // this.user = ret.data.data
        this.user = ret.data
      } catch (e) {
        this.$message.error('获取用户信息失败')
      }
    },
    toggleAside () {
      // 控制菜单点击切换效果
      this.isOpen = !this.isOpen
    }
  },
  created () {
    // 自动触发接口调用     （生命周期函数）
    this.localinfo()
  }
}
</script>
<style scoped lang="less">
.home {
  position: absolute;
  height: 100%;
  width: 100%;
  .el-container {
    height: 100%;
    .el-aside {
      background-color: #323745;
      .logo {
        width: 100%;
        height: 60px;
        background: #002244 url(../assets/imgs/logo_admin.png) no-repeat center /
          140px auto;
      }
      .mini-logo {
        // background: #002244 url(../assets/imgs/logo_admin.png) no-repeat left /
        //         140px auto;
        // margin-left: 15px;
        // transform: scale(1.2);
        background-position: 14px;
        background-size: 150px;
      }
    }
    .el-header {
      border-bottom: 1px solid #ddd;
      .el-icon-s-fold {
        font-size: 30px;
        line-height: 60px;
        vertical-align: middle;
      }
      .cname {
        font-size: 18px;
        margin-left: 5px;
      }
      .my-dropdown {
        padding-top: 15px;
        float: right;
        .user-icon {
          width: 30px;
          height: 30px;
          vertical-align: middle;
        }
        .user-name {
          color: #333;
          font-weight: bold;
          vertical-align: middle;
          padding-left: 5px;
        }
      }
    }
  }
}
</style>
